<template>
  <div>
    <m-header :title="iNowTitle"></m-header>
    <section class="message_con con">
      <ul class="message_ul message_center">
        <li v-show="listArr.length == 0 " style="text-align: center;line-height: 100px;font-size:20px; ">暂无消息</li>
        <li v-show="listArr.length > 0" class="message_li clear" v-for="list in listArr">
          <router-link tag="a" :to="'/messageDetails/'+list.msg_id">
            <div class="message_box1">
              <img src="../common/images/holiday.png" alt="账号认证" title="账号认证">
              <span v-if="list.hasread == '0'" class="mark_radiu"></span>
            </div>
            <div class="message_box2">
              <h1 v-if="list.msg_type == 1">公告</h1>
              <h1 v-if="list.msg_type == 2">套餐变更</h1>
              <h1 v-if="list.msg_type == 3">充值确认</h1>
              <h1 v-if="list.msg_type == 4">余额提醒</h1>
              <h1 v-if="list.msg_type == 5">系统消息</h1>
              <h1 v-if="list.msg_type == 6">管理员指定消息</h1>
              <span>{{list.create_date | timeStr}}</span>
              <div style="clear:both;"></div>
              {{list.msg_title}}
            </div>
          </router-link>
        </li>
      </ul>
      <Page :total="totalCount" show-total :page-size="pageSizeSec" size="small" v-if="totalCount > 0"
            @on-change="handleChange"></Page>
    </section>
    <Copyright></Copyright>
  </div>
</template>

<script type="text/ecmascript-6">
  import MHeader from 'base/m-header/m-header'
  import {ERR_OK} from 'config/config'
  import {Page} from 'iview'
  import Copyright from 'base/copyright/copyright'

  export default {
    data() {
      return {
        iNowTitle: '消息中心',
        totalCount: 0,
        listArr: [],
        pageSizeSec: 20,
        currentPage:1,
        pageRowCount:20,
        ajaxHistoryData: [],
        historyData: [],
        listIcon: [{title: '放假通知', src: '../common/images/holiday.png'}, {
          title: '套餐变更',
          src: '../common/images/product.png'
        }, {title: '财务通知', src: '/common/images/finance.png'}, {title: '财务通知', src: '../common/images/finance.png'}]
      }
    },
    created() {
      this.$nextTick(function () {
        this.getMessageList();
      })
    },
    methods: {
      handleChange(index) {
//        console.log(index)
//        var _start = ( index - 1 ) * this.pageSizeSec;
//        var _end = index * this.pageSizeSec;
//        this.historyData = this.ajaxHistoryData.slice(_start, _end);
        this.currentPage = index;
        this.getMessageList();
      },
      getMessageList() {
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/user/notice',
          data:{
            currentPage:this.currentPage,
            pageRowCount:this.pageRowCount
          }
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            this.listArr = res.data.data.page.list;
            this.totalCount = res.data.data.page.totalCount;
            // 保存取到的所有数据
            this.ajaxHistoryData = res.data.data.page.list;
            // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
//            if (this.totalCount <= this.pageSizeSec) {
//              this.historyData = this.ajaxHistoryData
//            } else {
//              this.historyData = this.ajaxHistoryData.slice(0, this.pageSizeSec);
//            }

          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    components: {
      MHeader,
      Copyright,
      Page
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .con {
    padding: 0.54rem 0.4rem;
  }

  .message_con .message_ul {
    border: 1px solid #cdd0d1;
    border-radius: 3px;
    -webkit-box-shadow: 0px 5px 5px #f1f0f0;
    box-shadow: 0px 5px 5px #f1f0f0;
  }

  * {
    box-sizing: content-box;
  }
</style>
